<!DOCTYPE html SYSTEM "about:legacy-compat">
<html>
<head>
    <title>Kilo</title>
    <link type="text/css" rel="stylesheet" media="screen" href="css/kilo.css">
    <link type="text/css" rel="stylesheet" media="screen" href="css/jqtouch.min.css">
    <link type="text/css" rel="stylesheet" media="screen" href="themes/apple/theme.css">

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jqtouch.min.js"></script>
    <script type="text/javascript">
        window.jQT = $.jQTouch({
            icon: 'kilo.png',
            statusBar: 'black'
        });
    </script>
    <script type="text/javascript" language="javascript"
            src="it.esselunga.iphone.Application/it.esselunga.iphone.Application.nocache.js"></script>
</head>
<body>
<div id="home">
    <div class="toolbar">
        <h1>Kilo</h1>
        <a class="button flip" href="#settings">Impostazioni</a>
    </div>
    <ul class="edgetoedge">
        <li class="arrow"><a href="#dates">Date</a></li>
        <li class="arrow"><a href="#about">Info</a></li>
    </ul>
</div>
<div id="about">
    <div class="toolbar">
        <h1>About</h1>
        <a class="button back" href="#">Back</a>
    </div>
    <div>
        <div class="info"><p>Kilo, l'applicazione per chi deve dimagrire !!!.</p></div>
    </div>
</div>
<div id="dates">
    <div class="toolbar">
        <h1>Date</h1>
        <a class="button back" href="#">Indietro</a>
    </div>
    <ul class="edgetoedge">
        <li class="arrow"><a id="0" href="#date">Oggi</a></li>
        <li class="arrow"><a id="1" href="#date">Ieri</a></li>
        <li class="arrow"><a id="2" href="#date">2 Giorni Indietro</a></li>
        <li class="arrow"><a id="3" href="#date">3 Giorni Indietro</a></li>
        <li class="arrow"><a id="4" href="#date">4 Giorni Indietro</a></li>
        <li class="arrow"><a id="5" href="#date">5 Giorni Indietro</a></li>
    </ul>
</div>
<div id="date">
    <div class="toolbar">
        <h1>Date</h1>
        <a class="button back" href="#">Indietro</a>
        <a class="button slideup" href="#createEntry">+</a>
    </div>
    <ul class="edgetoedge">
    </ul>
</div>
<div id="createEntry">
    <div class="toolbar">
        <h1>Nuovo Elemento</h1>
        <a class="button cancel" href="#">Annulla</a>
    </div>
    <form method="post">
        <ul>
            <li><input type="text" placeholder="Alimento"
                       name="food" id="food" autocapitalize="off"
                       autocorrect="off" autocomplete="off"/></li>
            <li><input type="text" placeholder="Calorie"
                       name="calories" id="calories" autocapitalize="off"
                       autocorrect="off" autocomplete="off"/></li>
            <li><input type="submit" class="submit" name="action"
                        value="Salva Entry">
            </li>
        </ul>
    </form>
    <div style="display:none">
        <li id="entryTemplate" class="entry" style="display:none">
            <span class="label">Etichetta</span>
            <span class="calories">000</span>
            <a class="button delete" href="#">Annulla</a><!--<span class="delete">Cancella</span>-->
        </li>
    </div>
</div>
<div id="settings">
    <div class="toolbar">
        <h1>Impostazioni</h1>
        <a class="button cancel" href="#">Annulla</a>
    </div>
    <form method="post">
        <ul>
            <li><input placeholder="Et&agrave;" type="text" name="age" id="age"/></li>
            <li><input placeholder="Peso" type="text" name="weight"
                       id="weight"/></li>
            <li><input placeholder="Budget" type="text" name="budget"
                       id="budget"/></li>
            <li><a class="leftButton" href="#home">Salva</a>
                <!--input type="submit" class="submit" name="action"
                       value="Salva"/--></li>
        </ul>
    </form>
</div>
</body>
</html>